<template>
  <div class="wp">
    <div class="hdr-my">
      <h3 class="my-tit">我的</h3>
      <img src="@/assets/6_1.png" class="hdr-pic-my" @click="shezhi">
    </div>
    <div class="user">
      <img src="@/assets/6_2.png" class="user-pic">
      <h4 class="user-name">李雪玲</h4>
      <h5 class="user-adds">中国 • 襄阳</h5>
      <span class="user-fx">分享</span>
      <i slot="icon" class="iconfont icon-fenxiang"></i>
    </div>
    <div class="row-a1-my">
      <ul class="ul-my">
        <li>
          <h4 class="ul-num">1286</h4>
          <h5 class="ul-name">关注</h5>
        </li>
        <li class="ul-bdr">          
          <h4 class="ul-num">3366</h4>
          <h5 class="ul-name">粉丝</h5>
          </li>
        <li>          
          <h4 class="ul-num">6673</h4>
          <h5 class="ul-name">喜欢</h5>
          </li>
      </ul>
    </div>
    <div class="row-a2-my">
       <h5 class="r2-my-ip">
         个人信息
         <img src="@/assets/2_jt.png" class="r2-pic">
       </h5>
       <h5 class="r2-my-ip">
         我的消息
         <span class="r2-num">6</span>
       </h5>
       <h5 class="r2-my-ip" @click="zhanghu">
         账户余额
         <img src="@/assets/2_jt.png" class="r2-pic">
         <span class="r2-num2">1375.00</span>
       </h5>
       <h5 class="r2-my-ip">
         我的评论
         <img src="@/assets/2_jt.png" class="r2-pic">
       </h5>
    </div>
  </div>
</template>

<script>
export default {
  // 定义属性
  data() {
    return {
      
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    shezhi() {
      this.$router.push('/setup')
    },
    zhanghu () {
      this.$router.push('/acbe')
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
  }
}
</script>

<style lang='less'>
  .hdr-my{
    position: relative;
    height: 200px;
    .my-tit{
      position: absolute;
      top: 100px;
      left: 50%;
      transform: translate(-50%);
    	font-size: 44px;
     	font-weight: normal;
    	font-stretch: normal;
     	letter-spacing: 0px;
    	color: #ffffff;
    }
    .hdr-pic-my{
      position: absolute;
      top: 114px;
      right: 48px;
      width: 36px;
    }
  }
  .user{
    position: relative;
    margin-left: 50px;
   overflow: hidden;
  .user-pic{
    width: 240px;
    float: left;
    padding-right: 36px;
    }
    .user-name{
    float: left;
    font-size: 44px;
    padding-top: 36px;
    padding-bottom: 5px;
	  font-weight: normal;
	  font-stretch: normal;
	  letter-spacing: 0px;
	  color: #ffffff;
    }
    .user-adds{
    width: 50%;
    float: left;
    font-size: 28px;
   	font-weight: normal;
	  font-stretch: normal;
	  letter-spacing: 0px;
	   color: #b5b7c5;
     padding-bottom: 30px;
     border-bottom: solid 1px #2a2c33;
    }
    .user-fx{
      margin-top: 10px;
    padding-left: 82px;
    padding-right: 46px;
    margin-right: 64px;
    font-size: 26px;
   	font-weight: normal;
	  font-stretch: normal;
	  letter-spacing: 2px;
    color: #9497ab;
    float: right;
	  height: 64px;
    line-height: 64px;
	  border-radius: 8px;
	  border: solid 2px #545c66;
    }
    .icon-fenxiang{
      position: absolute;
      top: 198px;
      right: 183px;
      font-size: 22px;
      color: #71768c;
    }
  }
  .row-a1-my{
  margin: 0 auto;
  margin-top: 40px;
  width: 654px;
	height: 126px;
	background-color: #2b323b;
	box-shadow: 0px 30px 50px 0px 
		rgba(33, 39, 46, 0.08);
	border-radius: 16px;
  ul{
    padding-top: 22px;
    display: flex;
    text-align: center;
    li{
      flex: 1;
    }
  }
  .ul-num{
    padding-top: 10px;
    font-size: 36px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #ffffff;
  }
  .ul-name{
    	font-size: 24px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #75808d;
  }
  .ul-bdr{
    border-left: 2px solid #363c45;
    border-right: 2px solid #363c45;
  }
  }
  .row-a2-my{
    margin-left: 50px;
    margin-top: 30px;
    .r2-my-ip{
      line-height: 140px;
  font-size: 36px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #dcdeea;
  border-bottom: 2px solid #333c47;
    }
    .r2-pic{
      padding-top: 55px;
      padding-right: 50px;
      float: right;
      width: 18px;
    }
    .r2-num{
    margin-top: 55px;
    margin-right: 48px;
    float: right;
    border-radius: 50%;
    text-align: center;
    line-height: 36px;
    width: 36px;
	  height: 36px;
	  background-color: #fb6894;
    font-size: 24px;
	  font-weight: normal;
	  font-stretch: normal;
	  letter-spacing: 0px;
	   color: #dcdeea;
    }
    .r2-num2{
    float: right;
    padding-right: 15px;
    font-size: 36px;
   	font-weight: normal;
   	font-stretch: normal;
   	letter-spacing: 0px;
   	color: #fb6894;
    }
  }
</style>